<template>
  <Timer
    :value="time"
    ref="timerRef"
    backgroundColor="#333"
    color="#fff"
    :isColon="false"
    :isDays="true"
    @end="endTimer"
  ></Timer>
  <br />
  <Button @click="startTimer">开始</Button>
  <Button @click="stopTimer">停止</Button>
  <Button @click="resetTimer">重置</Button>
</template>

<script>
import Timer from "@/components/Timer/Timer.vue";
import Button from "@/components/Button/Button.vue";
export default {
  components: { Timer, Button },
  data() {
    return {
      time: 96587, // 秒
    };
  },

  methods: {
    startTimer() {
      this.$refs.timerRef && this.$refs.timerRef.startTimer();
    },
    stopTimer() {
      this.$refs.timerRef && this.$refs.timerRef.stopTimer();
    },
    resetTimer() {
      this.$refs.timerRef && this.$refs.timerRef.resetTimer();
    },
    endTimer(e) {
      //   alert(`计时结束，时间${e.totalSeconds}秒`);
    },
  },
};
</script>
